<script setup lang="ts" name="search">
import { reactive, onMounted,ref,onBeforeUnmount } from 'vue'
import { useAppStore } from '@/store'
import { useLoadingBar,useNotification  } from 'naive-ui'
import { SearchOutline,AlbumsOutline } from '@vicons/ionicons5'
import Card from '@/layouts/card.vue'
import { onBeforeRouteLeave } from 'vue-router'
import { _search,_mylike } from '@/api/api'
import { useRequest } from 'alova'


const store = useAppStore()
const loadingBar = useLoadingBar()
const notification = useNotification()
const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}
 
const data =  reactive({
  loading: false,
  tags: [] as any[],
  myliketags: [] as any[],
  list: [] as any[],
  pge:1,
  activeVar:"全部",
  activeOdr:"更新时间",
  cachePage: {} as any, 
  cnt:16,
  type:1,
  ord:1,
  type_name:[
    {id:1,name:"漫画"},
    {id:2,name:"视频"},
    {id:3,name:"动画"}, 
  ],
  ords:[
    {id:1,name:"更新时间"},
    {id:2,name:"收藏数量"},
    {id:3,name:"随机推荐"},
    {id:4,name:"加入时间"},
    {id:5,name:"今日更新"},
    {id:6,name:"播放时长"},
  ],
  key:"",
  mz_tab:"漫画",
  alls:0,
  scrolltop:0,
  innerWidth:800,
  drawer:false
});

const list_ref = ref<any>({});
async function on_reset(){
  data.pge=1; 
}

async function on_refresh(){
  on_reset()
  get_tags()
  await get_list(data.type) 
  list_ref.value.scrollTo(0)
}

const on_scroll = (event:any) =>  {
  let scrollBottom =event.target.scrollHeight -event.target.scrollTop -event.target.clientHeight;
  if (scrollBottom < 10) {
    on_more()
  }
}

const on_more = () => {
  data.pge++   
  get_list(data.type)
}

const select_tag = async (item:any) => {
  on_reset() 
  data.activeVar = item.name
  await get_list(data.type)
  list_ref.value.scrollTo(0)
}

const select_ord = async (item:any) => {
  on_reset()    
  data.activeOdr = item.name
  data.ord = item.id
  await get_list(data.type)
  list_ref.value.scrollTo(0)
}

const select_type = (item:any) => {
  data.type = item.id
  // data.activeOdr = "更新时间"
  data.activeVar = "全部"
  data.key = ''
  on_refresh()
}

const on_search = async () => {
  if(!data.key){
    msg('请输入关键词后搜索')
    return   
  }
  await get_list(data.type)
  list_ref.value.scrollTo(0)
}

async function get_tags() {
  const { onSuccess }  = useRequest(_search.getTags({
    pge: 1,
    cnt: 100, 
    type: data.type,
  }))
  onSuccess((res:any) => {
    data.tags = res.data.list;
  });
}

async function get_myliketags() {
  const { onSuccess }  = useRequest(_mylike.mylike_tags({
    pge: 1,
    cnt: 100, 
  }))
  onSuccess((res:any) => {
    data.myliketags = res.data.list;
  });
}


async function get_list(type:any) {  
  data.loading = false;
  loadingBar.start()
  data.cnt = type==1?15:16
  const { onSuccess }  = useRequest(_search.getList({
    pge: data.pge,
    cnt: data.cnt,
    type:type,
    key:data.key,
    tag:data.activeVar,
    order:data.ord
  }))
  onSuccess((res:any) => {
    data.alls = res.data.cnt_all
    if(data.pge>1){
      data.list.push(...res.data.list);
    }else{
      data.list = res.data.list          
    }
    setTimeout(() => {
      loadingBar.finish()
    }, 200)
  });
}

const keydown = (e:any) => {
  if (e.keyCode == 13) {
    on_search()
  }
}



onBeforeRouteLeave((to, from, next) => {
  if (to.name === 'detail'&&from==from) {
    data.cachePage.list = ['search']  
  } else {
    data.cachePage.list = []
  } 
  store.setcachePage(data.cachePage)
  next()
})

const getwindow_size = async() => {
  if(window.innerWidth<400){
    data.innerWidth = window.innerWidth 
  }
}


onMounted(() => {
  getwindow_size()
  on_refresh()
  get_myliketags()
  window.addEventListener("keydown", keydown)
}); 

onBeforeUnmount(() => {
  window.removeEventListener('keydown', keydown)
})
</script>

<template>
  
  <div class="page_list  page_up"  :style="store.thems?.menu_left?'height:calc(100vh - 110px);':''">
      <div class="left"  v-if="data.innerWidth>400">
        <div class="title">
          <div style="width: 160px;margin-bottom: 10px;">
            <n-tag round :bordered="false" size="large">资源库(<n-number-animation :duration="1000" :from="0" :to="data.alls" />部)
             <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><AlbumsOutline /></n-icon></n-avatar></template>
            </n-tag>
          </div>

          <div style="width: 160px;margin-bottom: 10px;">
            <n-card content-style="padding:5px"  size="small" hoverable>
              <n-tabs type="segment"  :value="data.type"  justify-content="space-evenly"  size="small" :animated="true">
                <n-tab style="margin:2px;"  :style="item.id==data.type?'background:'+store.thems?.primary+';color:#fff':''" :name="item.id" :tab="item.id"    v-for="item in data.type_name" @click="select_type(item)">{{item.name}}</n-tab>
              </n-tabs>
          </n-card>
          </div>
          <div style="width: 160px;margin-bottom: 10px;">
            <n-card content-style="padding:5px"  size="small" hoverable>
              <div class="search"  style="width: 100%;">
            <n-input-group >
              <n-input  v-model:value="data.key" placeholder="请输入关键词" autofocus="false" size="small" clearable />
              <n-button type="primary" size="small" @click="on_search">
                <template #icon>
                    <n-icon><SearchOutline /></n-icon>
                  </template>
                </n-button>
            </n-input-group>
          </div>
          </n-card>
          </div>
          <div style="width: 160px;margin-bottom: 10px;">
            <n-card  content-style="padding:5px"  size="small" hoverable>
            <n-tag style="margin:2px;" :bordered="false" class="xiaoshou"  :style="item.name==data.activeVar?'animation: bounce;animation-duration: 0.5s;color:#fff;background:'+store.thems?.primary+'':''"  v-for="item in data.tags" @click="select_tag(item)">{{item.name}}</n-tag>
          </n-card>
          </div>

          <div style="width: 160px;margin-bottom: 5px;">
            <n-card content-style="padding:5px"  size="small" hoverable>
            <n-tag style="margin:2px;" :bordered="false" class="xiaoshou"  :style="item.name==data.activeOdr?'animation: bounce;animation-duration: 0.5s;color:#fff;background:'+store.thems?.primary+'':''"  v-for="item in data.ords" @click="select_ord(item)">{{item.name}}</n-tag>
          </n-card>
          </div>
        </div>
      </div>
      <div class="right" style="flex: 1;" id="list">
        <div v-if="data.innerWidth<400">
            <div style="width: 100%;margin: 5px 5px 0 5px;">
                <n-tag round :bordered="false" size="large">资源库({{data.alls}}部)
                <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><AlbumsOutline /></n-icon></n-avatar></template>
                </n-tag>

                <n-button  size="small" @click="data.drawer=true" style="float: right;margin: 5px 15px 0 5px;">
                <template #icon>
                    <n-icon><SearchOutline /></n-icon>
                  </template>
                </n-button>
            </div>
        </div>


        <!-- <n-virtual-list :item-resizable="true" :item-size="20" :style="data.innerWidth<400?'max-height: calc(100vh - 135px)':'max-height: calc(100vh - 50px)'" style="padding:10px;"  :items="data.list" :on-scroll="on_scroll">
          
          <template #default="{ item }">
            <div style="width: 20%;float: left;padding: 5px;">
              <Card :item="item" :key="item.id"/>
            </div>
            
          </template>
        </n-virtual-list> -->

        <n-scrollbar :style="data.innerWidth<400?'max-height: calc(100vh - 135px)':'max-height: calc(100vh - 50px)'" style="padding:10px;"  :on-scroll="on_scroll" ref="list_ref" trigger="none">
             <n-grid :cols="data.type==1?'5 200:2 600:5 800:5':'4 200:2 600:4 800:4'" :x-gap="10" :y-gap="10">
                <n-grid-item v-for="item in data.list">
                  <Card  :item="item" :myliketags="(data.myliketags as any)" />
                </n-grid-item> 
            </n-grid>
        </n-scrollbar>
    </div>
 
  </div>

  <n-drawer v-model:show="data.drawer" height="100%" width="220px" placement="right" :auto-focus="false" >
      <n-drawer-content style="padding: 10px;margin: 0;">
        <div class="title" style="margin: auto;">
          <div style="width: 200px;margin-bottom: 5px;">
            <n-tag round :bordered="false" size="large">资源库({{data.alls}}部)
             <template #avatar><n-avatar :style="{backgroundColor:store.thems?.primary}"><n-icon><AlbumsOutline /></n-icon></n-avatar></template>
            </n-tag>
          </div>

          <div style="width: 200px;margin-bottom: 10px;">
            <n-card title="按分类" header-style="padding:5px" content-style="padding:5px"  size="small" hoverable>
            <n-tag style="margin:0 5px 5px 0;" :bordered="false" class="xiaoshou" :style="item.id==data.type?'animation: bounce;animation-duration: 0.5s;color:#fff;background:'+store.thems?.primary+'':''"  v-for="item in data.type_name" @click="select_type(item)">{{item.name}}</n-tag>
          </n-card>
          </div>
          <div style="width: 200px;margin-bottom: 10px;">
            <n-card title="按关键词" header-style="padding:5px" content-style="padding:5px"  size="small" hoverable>
              <div class="search"  style="width: 100%;">
            <n-input-group >
              <n-input  v-model:value="data.key" placeholder="请输入关键词" autofocus="false" size="small" clearable />
              <n-button type="primary" size="small" @click="on_search">
                <template #icon>
                    <n-icon><SearchOutline /></n-icon>
                  </template>
                </n-button>
            </n-input-group>
          </div>
          </n-card>
          </div>
          <div style="width: 200px;margin-bottom: 10px;">
            <n-card title="按标签" header-style="padding:5px" content-style="padding:5px"  size="small" hoverable>
            <n-tag style="margin:0 5px 5px 0;" :bordered="false" class="xiaoshou"  :style="item.name==data.activeVar?'animation: bounce;animation-duration: 0.5s;color:#fff;background:'+store.thems?.primary+'':''"  v-for="item in data.tags" @click="select_tag(item)">{{item.name}}</n-tag>
          </n-card>
          </div>

          <div style="width: 200px;margin-bottom: 10px;">
            <n-card title="按排序" header-style="padding:5px" content-style="padding:5px"  size="small" hoverable>
            <n-tag style="margin:0 5px 5px 0;" :bordered="false" class="xiaoshou"  :style="item.name==data.activeOdr?'animation: bounce;animation-duration: 0.5s;color:#fff;background:'+store.thems?.primary+'':''"  v-for="item in data.ords" @click="select_ord(item)">{{item.name}}</n-tag>
          </n-card>
          </div>
        </div>
      </n-drawer-content>
    </n-drawer>
</template>

<style lang="scss" scoped>
.page_list{
  display: flex;
  .title{
    padding:10px 10px 0 10px;
    font-size: 18px;
  }
  
}
</style>